<template>
  <view class="item" @tap="$xyfun.to('/pages/news/detail?id='+item.id)">
    <view class="title">{{item.name}}</view>
    <view class="base">
      <p class="desc">{{item.desc}}</p>
      <view class="thumb">
        <image class="image2" mode="aspectFill" :src="$xyfun.image(item.image)"></image>
      </view>
    </view>
    <view class="tool" @tap="toLike">
      <text>{{item.views}}浏览</text>
      <text>{{item.comment_nums}}评论</text>
      <text>赞{{item.like_nums}}</text>
      <text class="pubtime">{{$xyfun.timeFormat(item.createtime,'yyyy-mm-dd')}}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "newsRow",
  props: {
    item: {
      type: Object,
    }
  },
  data(){
    return {
      isLike: 0,
      likeDisable : false
    }
  },
  methods:{
    //点赞
    toLike(){
      if(this.likeDisable){
        return;
      }
      this.likeDisable = true
      this.$api.post({
        url : '/news/like',
        data : {
          news_id : this.item.id,
        },
        success: res=>{
          this.isLike = res;
          this.likeDisable = false;
        }
      })
    }
  }
}
</script>

<style lang="scss">
.item{
  background: #fff;
  border-radius: 10rpx;
  border-bottom: 1rpx solid #f2f2f2;
  padding: 20rpx 0;
  .title{
    font-weight: bold;
    margin-bottom: 10rpx;
  }
  .base{
    display: flex;
    justify-content: space-between;
    .desc{
      font-size: 28rpx;
      color: #aeaeae;
      display: -webkit-box;
      -webkit-line-clamp: 2; /* 显示最多 2 行 */
      -webkit-box-orient: vertical; /* 设置排列方式为纵向 */
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 溢出部分显示省略号 */
      padding-top: 10rpx;
      margin-bottom: 15rpx;
    }
    .thumb{
      margin-left: 20rpx;
      image{
        width: 170rpx;
        height: 100rpx;
        border-radius: 14rpx;
        margin-top: 0;
      }
    }
  }

  .tool{
    display: flex;
    justify-content: flex-end;
    margin-top: 20rpx;
    text{
      color: #bababa;
      margin-right: 15rpx;
      font-size: 24rpx;
    }
  }
}
</style>
